<template>
  <div class="addRightConfig-container">
    <el-form
      ref="formRef"
      :model="data.form"
      label-width="80px"
      scroll-to-error
    >
      <el-form-item
        prop="name"
        label="名称"
        :rules="[{ required: true, message: '请输入名称', trigger: 'blur' }]"
      >
        <el-input :max="50" v-model="data.form.name"></el-input>
      </el-form-item>
      <el-form-item
        prop="description"
        label="描述"
        :rules="[{ required: true, message: '请输入描述', trigger: 'blur' }]"
      >
        <el-input
          :max="500"
          type="textarea"
          :rows="4"
          v-model="data.form.description"
        ></el-input>
      </el-form-item>
      <el-form-item
        prop="selectedJobs"
        label="职位"
        required
        :rules="[
          {
            validator: (rule, value) => {
              return value.length > 0;
            },
            message: '请至少选择一个职位',
          },
        ]"
      >
        <div class="form-item-job-box">
          <el-scrollbar class="form-item-job-box-left">
            <el-tree
              :data="data.departmentTrees"
              :props="{ key: 'id', label: 'name' }"
              default-expand-all
              highlight-current
              :expand-on-click-node="false"
              @node-click="events.handleNodeClick"
            ></el-tree>
          </el-scrollbar>
          <el-scrollbar class="form-item-job-box-right">
            <template v-for="job in data.jobs">
              <template
                v-if="data.form.selectedJobs.find((d) => d.id == job.id)"
              >
                <el-tag
                  class="job-tag"
                  type="success"
                  effect="dark"
                  size="large"
                  @click="events.handleClickTag(job)"
                  >{{ job.name }}</el-tag
                >
              </template>
              <template v-else>
                <el-tag
                  class="job-tag"
                  type="info"
                  effect="plain"
                  size="large"
                  @click="events.handleClickTag(job)"
                  >{{ job.name }}</el-tag
                >
              </template>
            </template>
          </el-scrollbar>
        </div>
        <div>{{ data.form.selectedJobs.map((d) => d.name).join(',') }}</div>
      </el-form-item>
      <el-form-item prop="selectedRightIds" label="权限">
        <div class="form-item-right-box">
          <el-tree
            ref="rightTreeRef"
            :data="data.rightTrees"
            :props="{ label: 'name' }"
            default-expand-all
            show-checkbox
            node-key="id"
            :expand-on-click-node="false"
          ></el-tree>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn-container">
      <el-button type="warning" @click="events.handleSubmit">编辑</el-button>
    </div>
  </div>
</template>

<script setup lang="js">
import { onMounted, ref } from 'vue';
import { reactive } from 'vue';
import { getDeprtmentTree } from '../../../functions/department';
import { getRightTree } from '../../../functions/right';
import { GetJobByDepartmentId } from '../../../functions/job';
import { toast } from '../../../utils/tools';
import { useRoute, useRouter } from 'vue-router';
import {  getRightConfigDetail, updateRightConfig } from '../../../functions/rightConfig';

const formRef = ref(null);
const rightTreeRef = ref(null);

const route=useRoute();
const router=useRouter();

const data=reactive({
    form:{
      name:'',
      description:'',
      selectedJobs:[],
      selectedRightIds:[]
    },
    departmentTrees:[],
    jobs:[],
    rightTrees:[]
})

const events={
  handleClickTag(job){
    if(data.form.selectedJobs.find(d=>d.id==job.id)){
      data.form.selectedJobs=data.form.selectedJobs.filter(d=>d.id!=job.id);
    }else{
      data.form.selectedJobs.push(job);
    }
    formRef.value.validateField("selectedJobs");
  },
    handleSubmit(){
      formRef.value?.validate(async (validated)=>{
        if(validated){
          const res=await updateRightConfig({
            name:data.form.name,
            description:data.form.description,
            jobIds:data.form.selectedJobs.map(d=>d.id),
            rightIds:rightTreeRef.value?.getCheckedNodes(false,true).map(d=>d.id)
          });
          if(res.code>=0){
            router.back();
            toast.success(res.message||'修改成功');
          }else{
            toast.error(res.message||'修改失败');
          }
        }
      })
    },
   async handleNodeClick(node){
      const res=await GetJobByDepartmentId(node.id);
      if(res.code>=0){
        data.jobs=res.data;
      }
    }
}
onMounted(async()=>{
    // 获取部门树
   const res1=await getDeprtmentTree();
   if(res1.code>=0){
    data.departmentTrees=res1.data;
   }
   // 获取权限树
   const res2=await getRightTree();
   if(res2.code>=0){
    data.rightTrees=res2.data;
   }
   // 获取权限配置对象
   const res3=await getRightConfigDetail(route.query.id);
   if(res3.code>=0){
    data.form.name=res3.data.name;
    data.form.description=res3.data.description;
    data.form.selectedJobs=res3.data.jobs;
   formRef.value?.se
   }
})
</script>

<style scoped lang="scss">
.addRightConfig-container {
  padding: 20px;
  padding-bottom: 20%;
}
.btn-container {
  margin-top: 20px;
  text-align: right;
}
:deep(
    .el-tree--highlight-current
      .el-tree-node.is-current
      > .el-tree-node__content
  ) {
  background-color: #baf !important; /* 高亮背景色 */
  color: #fff; /* 字体颜色 */
  font-weight: bold; /* 字体加粗 */
}
.form-item-job-box {
  width: 100%;
  height: 300px;
  display: flex;
}
.form-item-job-box-left {
  width: 25%;
  height: 100%;
}
.form-item-job-box-right {
  width: 75%;
  height: 100%;
  padding: 0 20px;
}
.job-tag {
  cursor: pointer;
  margin-right: 12px;
}

.form-item-right-box {
  height: 300px;
}
</style>
